<template>
  <div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="ct"
        :page-sizes="[2, 5, 10, 15, 20]"
        :page-size="ps"
        layout="total, sizes, prev, pager, next, jumper"
        :total="num"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  props: ["num", "currentPage", "pageSize"],
  methods: {
    handleSizeChange(val) {
      this.$emit("changeSize", val);
    },
    handleCurrentChange(val) {
      this.$emit("changeCurrent", val);
    },
  },
  data() {
    return {
      ct:this.currentPage,
      ps:this.pageSize
    };
  },
  watch:{
        currentPage:function(newValue,oldValue){
            this.ct  = newValue;
        },
        pageSize:function(newValue,oldValue){
            this.ps  = newValue;
        }
    }
};
</script>

<style>
.page-box {
  margin: 10px auto;
}
</style>
